<template>
  <f7-page>
    <f7-navbar no-shadow sliding>
      <f7-nav-left>
        <f7-link back icon-f7="chevron_left"></f7-link>
      </f7-nav-left>
      <f7-nav-title class="nav-title">关于</f7-nav-title>
      <f7-nav-right class="nav-title-right">
        <f7-link></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-block class="text-align-center" style="margin-top: 40px">
      <img
        src="../../assets/img/logo-qm.png"
        height="80"
        style="border-radius: 17.54%"
      />
      <h3 class="title">{{ $framework.config.info.name }}</h3>
      <p>{{ title }}</p>
    </f7-block>
    <f7-list>
      <li>
        <a class="item-link" @click="update(true)">
          <div class="item-content">
            <!-- <div class="item-media">
              <i class="icon icon-f7"></i>
            </div> -->
            <div class="item-inner">
              <div
                class="item-title"
              >
                检查新版本
              </div>
            </div>
          </div>
        </a>
      </li>
    </f7-list>
    <f7-block
      class="text-align-center"
      style="left: 0; right: 0; bottom: 0px; position: absolute"
      v-text="company"
    ></f7-block>
  </f7-page>
</template>
<style lang="less" scoped>
::v-deep.navbar {
  height: calc(88px * var(--ratio));
  .navbar-inner {
    justify-content: space-between;
    background-color: var(--color-fill-grey-inverse);
    .left {
      padding-left: calc(34px * var(--ratio));
      .link {
        padding: 0;
        width: auto;
        color: var(--color-ironblack);
      }
    }
    .title {
      color: var(--color-ironblack);
      font-size: var(--font-size-maintitle);
    }
    .right {
      padding-right: calc(38px * var(--ratio));
      margin-left: 0;
      .link {
        padding: 0;
        width: auto;
        color: var(--color-ironblack);
      }
    }
  }
}
.md .navbar a.link:before{
  content: none;
}
/deep/.page-content {
  padding-top: calc(88px * var(--ratio));
}
// >>> .page-content {
//   padding: 54px 0 0 !important;
// }
.block h3 {
  margin-top: 10px;
  color: #333;
  font-size: 20px;
  margin-bottom: 0px;
}
.block p {
  margin-bottom: 40px;
  font-size: 15px;
  margin-top: 5px;
  color: #999;
}
::v-deep.item-content {
  padding-left: calc(50px * var(--ratio));
  .item-inner {
    padding-right: calc(20px * var(--ratio));
    width: 95%;
    background-color: #f1f1f194;
    border-radius: 50px;
    .item-title {
      font-size: 15px;
      margin-left: 20px;
    }
  }
}
</style>
<script>
export default {
  computed: {
    title: function () {
      return (
        // this.$framework.config.info.name +
        " V" + this.$framework.config.info.version
      );
    },
    telephone: function () {
      return "tel:" + this.$framework.config.info.telephone;
    },
    company: function () {
      return "2019 ©" + this.$framework.config.info.company;
    },
  },
  methods: {
    update() {
      // this.$f7.dialog.alert("已经是最新版本了");
      //this.$framework.update.check(true);
    },
    share() {
      this.$framework.share.open(
        {
          href: this.$framework.config.info.url,
          title: this.$framework.config.info.name,
          content: this.$framework.config.info.name,
        },
        (r) => {
          this.$f7.dialog.toast(r ? "分享成功" : "分享失败");
        }
      );
    },
    welcome() {
      //business.showWelcome();
    },
  },
};
</script>
